<template>
  <el-container class="login-container">
    <!--左侧内容-->
    <el-card class="auth-card left-card">
      <h2 class="platform-title">校园社交平台</h2>
      <div class="platform-desc">
      <p>2209</p>
      <span>林宇扬，林子敬，林铎洋，吴佳彪，陈泽武</span>
      </div>
    </el-card>
    <!--右侧内容-->
    <el-card class="auth-card right-card">
      <div>
        <h2 class="author-title">登录</h2>
          <el-form :model="user" @submit.prevent="login" >
          <el-form-item >
            <el-input v-model="user.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item >
            <el-input v-model="user.password" type="password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" native-type="submit">登录</el-button>
          </el-form-item>
          <el-form-item>
            <router-link to="/register" class="to">没有账号？去注册</router-link>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </el-container>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import userStore from "../../store/index";
import { ElMessage } from "element-plus";
import api from '../../utils/index.js'; 
const userStoreInfo = userStore();

// 用户信息
const user = ref({
  phone: "",
  password: "",
});
const router = useRouter();

// 定义登录方法
const login = async () => {
  if (!user.value.phone || !user.value.password) {
    ElMessage.error("请输入手机号和密码");
    return;
  }
  try {
    const response = await api.get("/users", {
      params: {
        phone: user.value.phone,
        password: user.value.password,
      },
    });
    if (response.data.length > 0) {
      ElMessage.success("登录成功");
      // 保存用户信息到sessionStorage
      userStoreInfo.setUser(response.data[0]);
      router.push("/index");
    } else {
      ElMessage.error("手机号或密码错误");
    }
  } catch (error) {
    ElMessage.error("登录请求出错，请稍后重试");
  }
};
</script>

<style scoped>
.login-container {
  padding: 0;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;
  background: linear-gradient(135deg, #409eff, #67c23a);
  overflow: hidden;
  height: 100vh;
}

.auth-card {
  margin: 0; 
  height: 400px;
  width: 400px;
  border-radius:0;
  /* 调整阴影，避免连接处阴影明显 */
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none;
}
.left-card{
  background: linear-gradient(0deg, #3a485a 0%, #607089 100%), url("../../../public/assets/login.jpg") no-repeat right bottom;
  background-blend-mode: multiply; 
}
.right-card{
  background-color: white;
}
.platform-title {
  color: #fff;
  font-weight: 600;
  font-size: 24px; /* 调整标题字体大小 */
}
.platform-desc{
  color: #ffffff57;
}
.auth-title {
  text-align: center;
  margin-bottom: 20px;
  color: #24292e;
  font-weight: 600;
}

.el-form-item {
  margin-bottom: 16px;
}

.el-form-item__label {
  color: #24292e;
  font-weight: 500;
}

.el-input__inner,
.el-select__input {
  border-radius: 6px;
  border: 1px solid #d1d5da;
}

.el-input__inner:focus,
.el-select__input:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.el-button {
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  width: 300px;
}

.el-button.primary {
  background-color: #0969da;
  border-color: #0969da;
  color: white;
}

.el-button.primary:hover {
  background-color: #005cc5;
  border-color: #005cc5;
}

.el-button.info {
  background-color: #909399;
  border-color: #909399;
}

.el-button.info:hover {
  background-color: #a6a9ad;
  border-color: #a6a9ad;
}

.el-link {
  color: #0969da;
  text-decoration: none;
}

.el-link:hover {
  text-decoration: underline;
}

.terms-text {
  font-size: 12px;
  color: #57606a;
  text-align: center;
  margin-top: 10px;
}

.to:hover {
  color: #0969da;
}
</style>
